<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"  
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
	<body>
		<div id="contentContainer">
			<Row>
		        <i-col span="6">
					<Row>
						<i-col>
							<Button-group>
						        <i-button type="ghost"  v-on:click="doAddTreeButton()"><Icon type="ios-download-outline"></Icon> 新增</i-button>
						    	<i-button type="ghost"  v-on:click="doUpdateTreeButton()"><Icon type="ios-download-outline"></Icon> 修改</i-button>
						    	<i-button type="ghost"  v-on:click="doDeleteTreeButton()"><Icon type="ios-download-outline"></Icon> 删除</i-button>
						    	<i-button type="ghost"  v-on:click="doUpRemoveButton()"><Icon type="ios-download-outline"></Icon> 上移</i-button>
						    	<i-button type="ghost"  v-on:click="doDownRemoveButton()"><Icon type="ios-download-outline"></Icon> 下移</i-button>
						    </Button-group>
						</i-col>
						<i-col>
						    <Button-group>
						    	
						    </Button-group>
						</i-col>
						
						
						<i-col>
							<br/>
							<Tree ref="tree" :data="treeData" v-on:on-toggle-expand="toggleExpand" v-on:on-select-change="selectChange" v-on:on-check-change="checkChange" show-checkbox="true"></Tree>
						</i-col>
					</Row>							        	
		        	
				</i-col>
		        <i-col span="18">
		        	<!-- 综合查询 form-->
					<Collapse ref="vueQueryFormVisible" v-model="vueQueryFormVisible" accordion="true">
				        <Panel name="1">
				           	 综合查询
				            <p slot="content"  id="queryFormDomId"></p>
				        </Panel>
				    </Collapse> 
					
					<!-- 按钮 
				 	<div style="margin-bottom: 10px;margin-top: 20px;">
				 		
					</div>-->
					
					<!-- 数据表格 -->
					<i-table border="true" :context="self" :columns="vueTableColumns" :data="vueTableData"  v-on:on-selection-change="getCheckedTableRow($event)" ></i-table>
					
					<!-- 分页标签 -->
					<div style="margin: 10px;overflow: hidden">
				        <div style="float: right;">
				            <Page show-total="true" :page-size="vuePageSize" :total="vueRecordTotal" :current="vueCurrentPage" v-on:on-change="doPageTurning($event)"></Page>
				        </div>
				    </div>
					
					<!-- 新增 -->
			    	<Modal
				    	width="600"
				        v-model="vueAddModalVisible"
				      	:styles="{top: '80px'}"
				        title="增加">
			       	
				       	<i-form ref="vueAddForm" :model="vueAddForm" :rules="vueAddFormRules" :label-width="80">
				       		<Form-item prop="id" v-show="false">
					            <i-input v-model="vueAddForm.id"></i-input>
					        </Form-item>
					        <Form-item label="机构名称" prop="name">
					            <i-input v-model="vueAddForm.name" placeholder="请输入机构名称"></i-input>
					        </Form-item>
					        <Form-item label="描述" prop="descirption">
					            <i-input v-model="vueAddForm.descirption" type="textarea" :rows="4" placeholder="请输入描述"></i-input>
					        </Form-item>
					        
					        <!-- <Form-item label="排序" prop="sort">
					        	<Input-number :max="9999" :min="1" v-model="vueAddForm.sort"></Input-number>
					        </Form-item> -->
					        
					        
					        <Form-item label="上级部门" prop="parent_id">
							    <i-select v-if="parentDataSelect.length > 0" v-model="vueAddForm.parent_id" style="width:100%" placeholder="请选择上级部门">
							        <i-option v-for="item in parentDataSelect" :value="item.value" :key="item">{{ item.label }}</i-option>
							    </i-select>
							    <i-input v-else="true" value="暂无上级部门可选" disabled="disabled"></i-input>
							</Form-item>
							
					      
					        <Form-item label="是否启用" prop="available">
					        	<i-switch size="large" v-model="vueAddForm.available">
							        <span slot="open">启用</span>
							        <span slot="close">禁用</span>
							    </i-switch>
					        </Form-item>
					    </i-form>
				    	<!-- 自定义 modal 底部按钮 -->
					    <div slot="footer">
					     	<i-button type="primary"  v-on:click="submitAddTreeForm()">提交</i-button>
				            <i-button type="primary"  v-on:click="resetForm('vueAddForm')"  style="margin-left: 8px">重置</i-button>
				            <i-button type="primary"  v-on:click="vueAddModalVisible = false"  style="margin-left: 8px">取消</i-button>
				        </div>
			    	</Modal>
			    	
			    	<!-- 删除 -->
				    <Modal v-model="vueDeleteModalVisible" width="360">
				        <p slot="header" style="color:#f60;text-align:center">
				            <Icon type="information-circled"></Icon>
				            <span>删除确认</span>
				        </p>
				        <div style="text-align:center">
				            <p>{{vueDeleteMessage}} </p>
				        </div>
				        <div slot="footer">
				        	<i-button type="error"  :loading="vueDeleteProgressVisible" v-on:click="submitDeleteTreeForm">删除</i-button>
				        	<i-button type="primary"  v-on:click="vueDeleteModalVisible = false">取消</i-button>
				        </div>
				    </Modal>
				    
				    <!-- 修改 -->
			    	<Modal
				    	width="600"
				        v-model="vueUpdateModalVisible"
				      	:styles="{top: '50px'}"
				        title="修改">
			       	
					    <i-form ref="vueUpdateForm" :model="vueUpdateForm" :rules="vueUpdateFormRules" :label-width="80">
					    	<Form-item prop="id" v-show="false">
					            <i-input v-model="vueUpdateForm.id"></i-input>
					        </Form-item>
					        <Form-item label="机构名称" prop="name">
					            <i-input v-model="vueUpdateForm.name" placeholder="请输入机构名称"></i-input>
					        </Form-item>
					        <Form-item label="描述" prop="descirption">
					            <i-input v-model="vueUpdateForm.descirption" type="textarea" :rows="4" placeholder="请输入描述"></i-input>
					        </Form-item>
					        <!-- <Form-item label="排序" prop="sort">
					        	<Input-number :max="9999" :min="1" v-model="vueUpdateForm.sort"></Input-number>
					        </Form-item> -->
					        
					        <!-- <Form-item label="上级机构ID" prop="parent_id">
					            <i-input v-model="vueUpdateForm.parent_id" number="true" placeholder="请输入上级机构ID"></i-input>
					        </Form-item> -->
					        
					        <Form-item label="上级部门" prop="parent_id">
							    <i-select v-if="parentDataSelect.length > 0" v-model="vueUpdateForm.parent_id" style="width:100%" placeholder="请选择上级部门">
							        <i-option v-for="item in parentDataSelect" :value="item.value" :key="item">{{ item.label }}</i-option>
							    </i-select>
							    <i-input v-else="true" value="暂无上级部门可选" disabled="disabled"></i-input>
							</Form-item>
					        
					        
					        
					        <Form-item label="是否启用" prop="available">
					        	<i-switch size="large" v-model="vueUpdateForm.available">
							        <span slot="open">启用</span>
							        <span slot="close">禁用</span>
							    </i-switch>
					        </Form-item>
					    </i-form>
					    
				    	<!-- 自定义 modal 底部按钮 -->
					    <div slot="footer">
					     	<i-button type="primary"  v-on:click="submitUpdateTreeForm()">提交</i-button>
				            <i-button type="primary"  v-on:click="vueUpdateModalVisible = false"  style="margin-left: 8px">取消</i-button>
				        </div>
			    	</Modal>
		        </i-col>
		    </Row>
			
			
		</div>
		<br />
	
		<script th:src="@{/static/js/utils/tree-utils.js}"></script>
		<script th:src="@{/static/js/utils/table-utils.js}"></script>
		<script th:src="@{/static/js/utils/form-utils.js}"></script>
	 	<script th:src="@{/static/js/utils/iview-utils.js}"></script>
		
		<script th:src="@{/static/js/business/organization-biz.js}"></script>
	</body>
</html>
<!-- <%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="../include_admin_taglib.html"%>
<!DOCTYPE HTML>
<html class="no-js">
  <head>
    <title>Backend Organization Management Page</title>
    <meta name="description" content="这是后台管理组织结构管理页面">
    <meta name="keywords" content="organizationManagement">
    <%@ include file="../include_admin_head.html"%>
  </head>
  <body>
    <tags:subtitle primary="组织结构管理" secondary="列表" hr="true" />
    <tags:buttons security="organization" />
    <div class="am-g">
      <div class="am-u-sm-12">
        <div id="tableContainer"></div>
        <tags:pagination sizes="10,20"/>
      </div>
    </div>

    <%@ include file="../include_list_required.html"%>

    <%@ include file="admin_organization_add.html"%>
    <%@ include file="admin_organization_update.html"%>
    <%@ include file="admin_organization_copy.html"%>
    
    <script src="${pageContext.request.contextPath }/static/js/business/organization-biz.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/static/ckeditor/ckeditor.js"></script>
  </body>
</html> -->
